<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { User } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const queryFrm = ref({
  school_degree: ''
});
//111
const tableData = ref([]);

const loadTableData = () => {
  axios.get('http://localhost:8080/api/query', {
    params: {
      school_degree: queryFrm.value.school_degree
    }
  })
      .then((res) => {
        tableData.value = res.data;
        console.log(tableData.value);
      })
      .catch((err) => {
        console.error('请求数据失败:', err);
      });
};

// 自动加载数据
onMounted(() => {
  loadTableData();
});

const handleClick = () => {
  console.log('click');
};

const dialogAddFormVisible = ref(false);

const form = ref({
  name: '',
  School_degree: '',
  password: '',
  role: ''
});

const formLabelWidth = '120px';

const openDialog = () => {
  resetForm();
  dialogAddFormVisible.value = true;
};

const btnAddStuInfo = () => {
  axios.post('http://localhost:8080/api/add', null, {
    params: {
      name: form.value.name,
      School_degree: form.value.School_degree,
      password: form.value.password,
      role: form.value.role
    }
  })
      .then((res) => {
        if (res.data === 1) {
          ElMessage.success('数据提交成功');
          dialogAddFormVisible.value = false;
          loadTableData();
          resetForm();
        } else {
          ElMessage.error('数据提交失败');
        }
      })
      .catch((err) => {
        ElMessage.error('数据提交失败');
        console.error('数据提交失败:', err);
      });
};

const resetForm = () => {
  form.value = {
    name: '',
    School_degree: '',
    password: '',
    role: ''
  };
};

const handleDelete = (school_degree) => {
  ElMessageBox.confirm('确定删除该行数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.get(`http://localhost:8080/api/del/` + school_degree)
        .then((res) => {
          if (res.data === 1) {
            ElMessage.success('删除成功！');
            loadTableData();
          } else {
            ElMessage.warning('删除失败！');
          }
        })
        .catch((err) => {
          console.error('删除失败:', err);
          ElMessage.error('删除失败！');
        });
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

const dialogEditFormVisible = ref(false);
const editForm = ref({
  name: '',
  School_degree: '',
  password: '',
  role: ''
});

const openEditDialog = (row) => {
  editForm.value = { ...row }; // Copy row data to editForm
  dialogEditFormVisible.value = true;
};

const editStuInfo = () => {
  console.log(editForm.value);
  axios.post('http://localhost:8080/api/edit', editForm.value, {
    headers: {
      'Content-Type': 'application/json' // 确保发送JSON格式的数据
    }
  })
      .then((res) => {
        if (res.data === 1) {
          ElMessage.success('数据修改成功');
          dialogEditFormVisible.value = false;
          loadTableData();
        } else {
          ElMessage.error('数据修改失败');
        }
      })
      .catch((err) => {
        ElMessage.error('数据修改失败');
        console.error('数据修改失败:', err);
      });
};
</script>

<template>
  <el-card>
  <div class="card-header d-flex justify-content-between align-items-center">
    <div class="title-and-icon">
      <el-icon><User /></el-icon>
      <span>管理员权限管理</span>
    </div>
    <el-button type="primary" @click="openDialog">新增</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="序号" width="150">
      <template #default="{row, $index}">
        <span>{{$index+1 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="用户名" width="120" />
    <el-table-column prop="school_degree" label="账号" width="160" />
    <el-table-column prop="password" label="密码" width="120" />
    <el-table-column prop="role" label="角色" width="600" />
    <el-table-column fixed="right" label="账号管理" width="160">
      <template #default="{ row }">
        <el-button type="danger" size="small" @click="handleDelete(row.school_degree)">
          删除
        </el-button>
        <el-button type="primary" size="small" @click="openEditDialog(row)">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>
<!--//新增-->
  <el-dialog v-model="dialogAddFormVisible" title="新增管理员对话框" width="500">
    <el-form :model="form">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学号" :label-width="formLabelWidth">
        <el-input v-model="form.School_degree" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" :label-width="formLabelWidth">
        <el-select v-model="form.role" placeholder="---请选择一个职位---">
          <el-option label="权限管理员" value="权限管理员" />
          <el-option label="申诉建议管理员" value="申诉建议管理员" />
          <el-option label="审核管理员" value="审核管理员" />
          <el-option label="后台业务员" value="后台业务员" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false">取消</el-button>
        <el-button type="primary" @click="btnAddStuInfo">添加</el-button>
      </div>
    </template>
  </el-dialog>
  <!--/编辑-->
  <el-dialog v-model="dialogEditFormVisible" title="编辑管理员信息" width="500">
    <el-form :model="editForm">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="editForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学号" :label-width="formLabelWidth">
        <el-input v-model="editForm.school_degree" autocomplete="off" readonly />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="editForm.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" :label-width="formLabelWidth">
        <el-select v-model="editForm.role" placeholder="---请选择一个职位---">
          <el-option label="权限管理员" value="权限管理员" />
          <el-option label="申诉建议管理员" value="申诉建议管理员" />
          <el-option label="审核管理员" value="审核管理员" />
          <el-option label="后台业务员" value="后台业务员" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editStuInfo">保存</el-button>
      </div>
    </template>
  </el-dialog>

  </el-card>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-and-icon {
  display: flex;
  align-items: center;
}

.title-and-icon span {
  margin-left: 5px;
}

</style>
